import React, {Component} from 'react';
import './App.css';

class ListOfWords extends React.PureComponent {
  render() {
    return <div>{this.props.words.join(',')}</div>;
  }
}
class WordAdder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      words: ['marklar']
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    // 这段内容将会导致代码不会按照你预期的结果运行
    const words = this.state.words;
    words.push('marklar');
    this.setState({words: words});
  }

  render() {
    return (
        <div className={'App'}>
          <button onClick={this.handleClick} >点我啊</button>
          <ListOfWords words={this.state.words} />
        </div>
    );
  }
}

export default WordAdder;
